<!--  -->
<template>
    <div class="guide">
        <cube-slide
            class="slide"
            ref="slide"
            :auto-play="false"
            :showDots="true"
            :loop="false"
            :initialIndex="0"
        >
            <cube-slide-item>
                <div class="guild-1">
                  <div></div>
                </div>
            </cube-slide-item>
            <cube-slide-item>
                <div class="guild-2">
                    <button class="z-btn" @click="toIndex">体验</button>
                </div>
            </cube-slide-item>
        </cube-slide>
    </div>
</template>

<script>
export default {
  name: "Guide",
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
      toIndex(){
          this.$router.replace("/index")
          this.$store.commit("firstStart")
      }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
// 修改 slide dot
.guide /deep/ .cube-slide-dots > span {
  height: 4px;
  width: 15px;
}
.guide /deep/ .cube-slide-dots > span.active {
  background: #ff0000;
}
.guide {
  height: 100%;
  background: greenyellow;
  .slide {
    height: 100%;
    .guild-1 {
      height: 100%;
    }
    .guild-2 {
      padding-top: 500px;
      height: 100%;
      box-sizing: border-box;
      background: gray;
    }
    .z-btn{
        margin: 0 auto;
        display: block;
        width: 70px;
        height: 30px;
    }
  }
}
</style>